<script setup>
 import bgImage from '@/assets/image/bg-image.jpg'
import {onMounted, reactive,ref} from 'vue'


const params=reactive({
    currentPage:1,
    pageSize:5
})


const StaticArchiveList= [
  {
    id: 1,
    title: '部署',
    cover:bgImage,
    createTime: '2022-04-12 20:46',
    
  },
  {
    id: 2,
    title: '博客部署',
    cover:bgImage,
    createTime: '2021-04-12 20:46',
  },
  {
     id: 3,
    title: '博客',
    cover:bgImage,
    createTime: '2020-04-12 20:46',
  },
  {
    id: 4,
    title: '博客记录',
    cover:bgImage,
    createTime: '2019-04-12 20:46',
  },
  {
    id: 5,
    title: '博客开始',
    cover:bgImage,
    createTime: '2018-04-12 20:46',
  },
   {
    id: 6,
    title: '博客创建',
    cover:bgImage,
    createTime: '2018-03-12 20:46',
  },
]


const  archiveList=ref([])
const getArchiveList = ()=>{
      console.log(archiveList.value);
        const current=(params.currentPage-1)*params.pageSize
        archiveList.value=StaticArchiveList.slice(current,current+params.pageSize)
}
onMounted(()=>{
    getArchiveList();
})
</script>


<template>  
   <el-card>
    <div class="max-w-[80%]  p-[20px]">
            <el-timeline style="max-width: 600px">
            <el-timeline-item
            v-for="(archive, index) in archiveList"
            :key="index"
            center placement="top"
            >
           
            <div class="item  flex items-center">
                <div class="cover w-[8rem] h-[8rem] overflow-hidden">
                    <el-image
                    :src="archive.cover"
                    class="w-[100%] h-[100%] druation-300 hover:scale-125"
                    fit="cover"
                    ></el-image>
                </div>
                <div class="info ml-[2rem]">
                    <div class="title text-xl ">{{ archive.title }}</div>
                    <div class="cratetime"> {{ archive.createTime }}</div>
                </div>
            </div>
            </el-timeline-item>
             </el-timeline>
   <el-pagination v-model:page-size="params.pageSize"  v-model:current-page="params.currentPage"   background layout="prev, pager, next" :total="StaticArchiveList.length"  class="justify-center items-center" @change="getArchiveList"/>

    </div>
     </el-card>
</template>